<!-- #layout name=default -->
<style>
    #category_tree {
        padding: 10px 0;
        border: 1px solid #e5e5e5;
        border-radius: 2px;
        max-height: 460px;
        overflow-y: auto;
    }
    
    .category-list,
    .sub-category-list {
        list-style: none;
        padding-left: 10px;
        margin-bottom: 0;
    }
    
    .sub-category-list {
        padding-left: 30px;
    }
    
    .sub-category-list li {
        position: relative;
    }
    
    .sub-category-list li::before {
        content: '';
        width: 15px;
        height: 21px;
        background-image: url(/_Admin/Styles/images/jstree.png);
        background-position: -79px -2px;
        position: absolute;
        left: -23px;
        top: -3px;
    }
    
    .tree-checkbox label {
        cursor: pointer;
        margin-bottom: 6px;
    }
    
    .tree-checkbox label .icon {
        width: 22px;
        height: 15px;
        background-image: url(/_Admin/Styles/images/jstree.png);
        background-position: -169px -9px;
        display: inline-block;
        position: relative;
        top: 2px;
    }
    
    .tree-checkbox label.checked .icon {
        background-position: -233px -9px;
    }
    
    .tree-checkbox label input[type=checkbox] {
        display: none;
    }
    
    .selected-cates-container {
        border: 1px solid #e5e5e5;
        border-right: 0;
        border-radius: 2px 0 0 2px;
        padding: 6px 6px;
        height: 32px;
    }
    
    .selected-cates-container span.cate {
        padding: 2px 4px;
        border: 1px solid #e5e5e5;
        border-radius: 2px;
        cursor: default;
        margin-right: 3px;
        user-select: none;
    }
</style>
<div id="main" class="clearfix">

    <div class="col-md-8 col-md-offset-2">

        <fieldset class="margin-bottom-15 clearfix">
            <legend>
                <div class="pull-left">Basic info</div>
                <div class="clearfix margin-bottom-5" data-bind="component: { name: 'kb-multilang-selector', params: siteLangs }"></div>
            </legend>
            <div class="clearfix" data-bind="component: {
                name: 'kb-field-panel',
                params: {
                    fields: fields,
                    startValidating: startValidating,
                    validationPassed: validationPassed,
                    values: contentValues,
                    siteLangs: siteLangs
                }
            }"></div>
            <div class="col-md-11">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-md-3">Category</label>
                        <div class="col-md-9">
                            <div class="input-group">
                                <div class="selected-cates-container">
                                    <!-- ko foreach: selectedCategories -->
                                    <span class="cate" data-bind="text: $data.name"></span>
                                    <!-- /ko -->
                                </div>
                                <span class="input-group-btn">
                                    <button class="btn blue" data-bind="click: onShowCategoriesModal">Select</button>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>

        <fieldset class="margin-bottom-25 clearfix">
            <legend>Specification &amp; stock</legend>
            <div class="col-md-11" data-bind="component: {
                name: 'kb-commerce-spec',
                params: {
                    fields: specFields,
                    dynamicFieldsChange: dynamicFieldsChange
                } 
            }"></div>
        </fieldset>

        <div>
            <table class="table table-striped table-hover table-bordered">
                <thead>
                    <tr>
                        <!-- ko if: specNames().length -->
                        <!-- ko foreach: specNames -->
                        <th data-bind="text: $data"></th>
                        <!-- /ko -->
                        <!-- /ko -->
                        <th class="table-short">Stock</th>
                        <th class="table-short">Price</th>
                        <th>SKU</th>
                        <th>SKU preview</th>
                        <th>Images</th>
                        <th class="table-action">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- ko if: typesMatrix().length -->
                    <!-- ko foreach: typesMatrix -->
                    <tr>
                        <!-- ko foreach: { data: $data.types, as: 'type'} -->
                        <td data-bind="text: type.value"></td>
                        <!-- /ko -->
                        <td>
                            <div class="form-group">
                                <input type="number" min="0" class="form-control input-xsmall" data-bind="value: $data.stock, error: $data.stock, errorPlacement: 'top', event: { keydown: Kooboo.event.input.positiveIntegerOnly }">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <input type="number" min="0" class="form-control input-xsmall" data-bind="value: $data.price, error: $data.price, errorPlacement: 'top'">
                            </div>
                        </td>
                        <td>
                            <div class="form-group">
                                <input type="text" class="form-control input-xsmall" data-bind="value: $data.sku">
                            </div>
                        </td>
                        <td>
                            <button class="btn blue" data-bind="click: $parent.selectSkuPic.bind(this)">Select file</button>
                            <div class="file-list">
                                <!-- ko if: skuImage -->
                                <ul>
                                    <li>
                                        <div class="fileinput-new thumbnail">
                                            <img data-bind="attr: { src: $data.skuThumbnail }" style="width: 80px; height: 80px;">
                                        </div>
                                        <!-- ko text: $data.skuImage -->
                                        <!-- /ko -->
                                        <a data-bind="click: $parent.removeSkuPic.bind(this), attr: { title: Kooboo.text.common.remove }" href="javascript:;">
                                            <i class="fa fa-remove"></i>
                                        </a>
                                    </li>
                                </ul>
                                <!-- /ko -->
                            </div>
                        </td>
                        <td>
                            <button class="btn blue" data-bind="click: $parent.selectImages.bind(this)">Select file</button>
                            <div class="file-list">
                                <!-- ko if: images && images().length -->
                                <ul data-bind="foreach: images">
                                    <li>
                                        <div class="fileinput-new thumbnail">
                                            <img data-bind="attr: { src: $data.thumbnail }" style="width: 80px; height: 80px;">
                                        </div>
                                        <!-- ko text: $data.url -->
                                        <!-- /ko -->
                                        <a data-bind="click: $root.removeImg.bind($data, $parent), attr: { title: Kooboo.text.common.remove }" href="javascript:;">
                                            <i class="fa fa-remove"></i>
                                        </a>
                                    </li>
                                </ul>
                                <!-- /ko -->
                            </div>
                        </td>
                        <td>
                            <a href="javascript:;" class="label" data-bind="text: Kooboo.text.commerce.product[$data.online() ? 'inStock' : 'dropOff'], click: $parent.toggleStatus.bind(this), css: { green: $data.online(), 'label-default': !$data.online() }"> </a>
                        </td>
                    </tr>
                    <!-- /ko -->
                    <!-- /ko -->
                </tbody>
            </table>
        </div>
    </div>

    <div data-bind="component: { name: 'kb-media-dialog', params: {
        data: mediaDialogData,
        multiple: multipleMedia()
    }}"></div>

    <div data-bind="modal: showCategoriesModal" class="modal fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-bind="click: onHideCategoriesModal"><i class="fa fa-close"></i></button>
                    <h4 class="modal-title">Category</h4>
                </div>
                <div class="modal-body">
                    <div id="category_tree" data-bind="visible: categories().length">
                        <ul data-bind="foreach: categories" class="category-list">
                            <li data-bind="template: { data: $data, name: 'category-template' }"></li>
                        </ul>
                    </div>
                    <!-- ko if: !categories().length -->
                    <p class="form-control-static">You don't have a category yet.</p>
                    <!-- /ko -->
                </div>
                <div class="modal-footer">
                    <button class="btn green" data-bind="click: onSaveCategoriesModal">Save</button>
                    <button class="btn gray" data-bind="click: onHideCategoriesModal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <div class="page-buttons">
        <!-- ko ifnot: isNew -->
        <div class="btn-group dropup">
            <button data-bind="click: onSaveAndReturn" class="btn green" style="margin: 0;">Save &amp; Return</button>
            <a class="btn green dropdown-toggle" data-toggle="dropdown" style="margin:0;min-width:auto;">
                <i class="fa fa-angle-up"></i>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="javascript:;" data-bind="click: onSave">Save</a>
                </li>
            </ul>
        </div>
        <!-- /ko -->
        <!-- ko if: isNew -->
        <button data-bind="click: onSave" class="btn green">Save</button>
        <!-- /ko -->
        <a data-bind="attr: { href: typesUrl }" class="btn gray">Cancel</a>
    </div>
</div>
<script>
    Kooboo.loadJS([
        "/_Admin/Scripts/components/kbMultilangSelector.js",
        "/_Admin/Scripts/components/kbFieldPanel.js",
        "/_Admin/Scripts/components/ECommerce/kbCommerceSpec.js",
        "/_Admin/Scripts/Kooboo/Guid.js",
        "/_Admin/Scripts/lib/jstree.min.js"
    ])
    Kooboo.loadCSS([
        "/_Admin/Styles/jstree/style.min.css"
    ])
</script>
<script src="/_Admin/View/ECommerce/Product.js"></script>
<script type="text/html" id="category-template">
    <div class="tree-checkbox">
        <label data-bind="css: { checked: selected }">
            <i class="icon"></i>
            <input type="checkbox" data-bind="checked: selected">
            <!-- ko text: name -->
            <!-- /ko -->
        </label>
        <!-- ko if: subCats().length -->
        <ul data-bind="foreach: subCats" class="sub-category-list">
            <li data-bind="template: { data: $data, name: 'category-template' }"></li>
        </ul>
        <!-- /ko -->
    </div>
</script>